<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      label-position="right"
      label-width="150px"
    >
      <h4 class="title_2 mb10">项目查询</h4>
      <el-row> 
        <el-col :span="8">
          <el-form-item label="所属机构" prop="createOrg">
            <el-select
              v-model="queryParams.createOrg"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in branchIdOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目号" prop="projectCode">
            <el-input
              v-model="queryParams.projectCode"
              placeholder="请输入"
              clearable
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目名称" prop="projectName">
            <el-input
              v-model="queryParams.projectName"
              placeholder="请输入"
              clearable
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称" prop="custName">
            <el-input
              v-model="queryParams.custName"
              placeholder="请输入"
              clearable
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目类型" prop="projectType2">
            <el-select
              v-model="queryParams.projectType2"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in projectType2Options"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="投标日期" prop="bidDate">
            <el-date-picker
              v-model="queryParams.bidDate"
              type="date"
              placeholder="请选择"
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
      </el-row>
    </el-form>

    <div class="mb10 flex_sb">
      <span class="title_2">项目列表</span>
      <div>
        <el-button plain type="primary" icon="Plus" @click="toPage('add')">新增项目</el-button>
        <el-button plain type="danger" icon="Delete" >失效</el-button>
        <el-button plain type="warning" icon="Finished" >完成</el-button>
        <el-button plain type="success" icon="Download" >导出</el-button>
      </div>
    </div>
    <el-table v-loading="loading" :data="tableList">
      <el-table-column label="项目号" align="center" prop="projectCode" min-width="120" :show-overflow-tooltip="true" />
      <el-table-column label="项目名称" align="center" prop="projectName" min-width="120" :show-overflow-tooltip="true" />
      <el-table-column label="客户名称" align="center" prop="custName" min-width="120" :show-overflow-tooltip="true" />
      <el-table-column label="项目所属机构" align="center" prop="createOrg" min-width="120" :show-overflow-tooltip="true" />
      <el-table-column label="项目类型" align="center" prop="projectType2" min-width="100" :show-overflow-tooltip="true" />
      <el-table-column label="投标日期" align="center" prop="bidDate" min-width="120" :show-overflow-tooltip="true" />
      <el-table-column label="本年度保费规模（万元）" align="center" prop="clientPremiumScope" min-width="140" :show-overflow-tooltip="true" />
      <el-table-column label="预计总保费（万元）" align="center" prop="yjzbf" min-width="100" :show-overflow-tooltip="true" />
      <el-table-column label="目标保费（万元）" align="center" prop="mbbf" min-width="130" :show-overflow-tooltip="true" />
      <el-table-column label="目标份额（%）" align="center" prop="mbfe" min-width="120" :show-overflow-tooltip="true" />
      <el-table-column label="预计分出金额" align="center" prop="yjfcje" min-width="140" :show-overflow-tooltip="true" />
      <el-table-column label="预计分出比例" align="center" prop="yjfcbl" min-width="140" :show-overflow-tooltip="true" />
      <el-table-column label="创建时间" align="center" prop="createTime" min-width="120" :show-overflow-tooltip="true" />
      <el-table-column label="项目创建人" align="center" prop="createPerson" min-width="120" :show-overflow-tooltip="true" />
      <el-table-column label="操作" fixed="right" align="center" width="200" class-name="small-padding fixed-width">
        <template #default="{row}">
          <el-button link type="primary" @click="toPage('details')">详情</el-button>
          <el-button link type="primary" @click="toPage('edit')" v-if="row.status=='1'">编辑</el-button>
          <el-button link type="primary" @click="toPage('approval')" v-if="row.status=='2'">审批</el-button>
          <el-button link type="primary" @click="toPage('follow')" v-if="row.status=='3'">跟进</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
  
<script setup name="MyFollowing">
const router = useRouter();

const branchIdOptions = ref([
  { label: "总公司", value: 1 },
  { label: "武汉分公司", value: 2 },
  { label: "上海分公司", value: 3 },
]);
const projectType2Options = ref([
  { label: "车险项目", value: 1 },
  { label: "产险项目", value: 2 },
]);
const certTypeOptions = ref([
  { label: "统一社会信用代码", value: 1 },
  { label: "组织机构代码", value: 2 },
]);

const toPage = (type) => {
  router.push({ path: "/project/"+type });
};

// 列表查询逻辑-start
const loading = ref(false);
const tableList = ref([]);
const total = ref(0);
const queryRef = ref(null);
const queryParams = reactive({
  custName: "",
  certType: "",
  certNo: "",
  pageNo: 1,
  pageSize: 10,
});
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    tableList.value = [
      {
        id: 1,
        status: "1",
        projectCode: "P723462843247238",
        projectName: "测试项目1",
        custName: "武汉建筑工程有限公司",
        createOrg: "武汉分公司",
        projectType2: "车险项目",
        clientPremiumScope: 10000,
        yjzbf: 10000,
        mbbf: 10000,
        mbfe: "10",
        yjfcje: 10000,
        yjfcbl: "10",
        createTime: "2024-02-19",
        createPerson: "张某钧",
        bidDate: "2024-02-27"
      },
      {
        id: 2,
        status: "2",
        projectCode: "P723462843247238",
        projectName: "测试项目1",
        custName: "武汉建筑工程有限公司",
        createOrg: "武汉分公司",
        projectType2: "车险项目",
        clientPremiumScope: 10000,
        yjzbf: 10000,
        mbbf: 10000,
        mbfe: "10",
        yjfcje: 10000,
        yjfcbl: "10",
        createTime: "2024-02-19",
        createPerson: "张某钧",
        bidDate: "2024-02-27"
      },
      {
        id: 3,
        status: "3",
        projectCode: "P723462843247238",
        projectName: "测试项目1",
        custName: "武汉建筑工程有限公司",
        createOrg: "武汉分公司",
        projectType2: "车险项目",
        clientPremiumScope: 10000,
        yjzbf: 10000,
        mbbf: 10000,
        mbfe: "10",
        yjfcje: 10000,
        yjfcbl: "10",
        createTime: "2024-02-19",
        createPerson: "张某钧",
        bidDate: "2024-02-27"
      },
      {
        id: 4,
        status: "4",
        projectCode: "P723462843247238",
        projectName: "测试项目1",
        custName: "武汉建筑工程有限公司",
        createOrg: "武汉分公司",
        projectType2: "车险项目",
        clientPremiumScope: 10000,
        yjzbf: 10000,
        mbbf: 10000,
        mbfe: "10",
        yjfcje: 10000,
        yjfcbl: "10",
        createTime: "2024-02-19",
        createPerson: "张某钧",
        bidDate: "2024-02-27"
      },
    ];
    total.value = Number(tableList.value.length);
    loading.value = false;
  }, 300);
};
const resetQuery = (formEl) => {
  queryRef.value.resetFields();
  getList();
};
getList();
// 列表查询逻辑-end
</script>
  
<style lang="scss" scoped>
</style>
  